<template>
	<div class="user-wrapper" :class="theme" style="color: black;overflow:hidden">

		<a-layout-header style="background: #fff; padding: 0">
			<div class="headBar">
				<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="changetype" />
				<div class="right">
					<a-dropdown>
						<span>
							<a-icon type="swap" @click="e => e.preventDefault()" />切换系统
						</span>
						<a-menu slot="overlay">
							<a-menu-item v-for="(item,index) in manage">
								<a :href="item.appAddress+'?token='+user.token+'&appId='+item.id"
									target='_blank'>{{item.appName}}</a>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
					<img src="../../assets/1.png" class="userlogo"></img>
					<!-- <a-menu-item @click="handleLogout"> -->
					<a href="javascript:;" style="color: #000000; margin-right: 20px;" @click="handleLogout">登录退出</a>
					<!-- </a-menu-item> -->
					<!-- <a-dropdown> -->
					<!-- <a-icon type="down" @click="e => e.preventDefault()" /> -->
					<!-- <a-menu slot="overlay"> -->
					<!-- 								<a-menu-item>
											<a href="javascript:;">个人信息</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">测试信息</a>
										</a-menu-item> -->
					<!-- 										<a-menu-item @click="handleLogout">
											<a href="javascript:;">退出</a>
										</a-menu-item> -->
					<!-- </a-menu> -->
					<!-- </a-dropdown> -->
				</div>
			</div>
		</a-layout-header>

		<!--    <header-notice class="action"/>-->
		<!--    <a-dropdown>
          <span class="action action-full ant-dropdown-link user-dropdown-menu"> -->
		<!-- 头像 -->
		<!--            <a-avatar class="avatar" size="small" src="~@/assets/icon/icon_tx.png"/>-->
		<!--            <img style="width: 48px;height: 48px;margin: -8px 6px 0 0" src="~@/assets/icon/icon_tx.png"/>
            <span class="item_font">{{ userInfo.realName }}</span>
            <img style="margin-left: 5px;margin-top:-3px;width: 16px;height: 16px" src="/static/menuIcon/down.png"/>
          </span>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper"> -->
		<!--        <a-menu-item key="0">-->
		<!--          <router-link :to="{ name: 'account-center' }">-->
		<!--            <a-icon type="user"/>-->
		<!--            <span>个人中心</span>-->
		<!--          </router-link>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="1">-->
		<!--          <router-link :to="{ name: 'account-settings-base' }">-->
		<!--            <a-icon type="setting"/>-->
		<!--            <span>账户设置</span>-->
		<!--          </router-link>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="3" @click="systemSetting">-->
		<!--          <a-icon type="tool"/>-->
		<!--          <span>系统设置</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="4" @click="updatePassword">-->
		<!--          <a-icon type="setting"/>-->
		<!--          <span>密码修改</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="5" @click="updateCurrentDepart">-->
		<!--          <a-icon type="cluster"/>-->
		<!--          <span>切换部门</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="6" @click="clearCache">
          <a-icon type="sync"/>
          <span>清理缓存</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown> -->

		<!--    <span class="action">
          <a class="logout_title" href="javascript:;">
            <img style="width: 24px;height: 24px;margin-top: -5px" src="~@/assets/icon/msg.png">
            <span class="item_font" >&nbsp;您有{{unReadMsgNum}}条新消息</span>
          </a>
    </span>

    <a-dropdown>
          <span class="action action-full ant-dropdown-link user-dropdown-menu"> -->
		<!-- 头像 -->
		<!--            <a-avatar class="avatar" size="small" src="~@/assets/icon/icon_tx.png"/>-->
		<!--            <img style="width: 22px;height: 22px;margin-top: -6px" src="~@/assets/icon/icon_bsdt.png"/>
            <span class="item_font">&nbsp;切换系统</span>
            <img style="margin-left: 5px;margin-top:-3px;width: 16px;height: 16px" src="/static/menuIcon/down.png"/>
          </span>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper" style="width: 300px"> -->
		<!--        <a-menu-item>-->
		<!--          <a href="javascript:void(0)" @click="toPath({ID:'1234',APP_ADDRESS:'http://localhost:3010'})">-->
		<!--            <a-icon type="cluster"/>-->
		<!--            <span>本地</span>-->
		<!--          </a>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item v-for="(item,index) in managerList" :key="index">
          <a href="javascript:void(0)" @click="toPath(item)">
            <a-icon type="cluster"/>
            <span>{{item.APP_NAME == null ? item.appName:item.APP_NAME}}</span>
          </a>
        </a-menu-item>
      </a-menu>
    </a-dropdown> -->

		<!--    <span class="action">
          <a class="logout_title" href="javascript:;">
            <img style="width: 22px;height: 22px;margin-top: -6px" src="~@/assets/icon/icon_xxsy.png">
            <span class="item_font">&nbsp;学校首页</span>
          </a>
    </span> -->

		<!--    <span class="action">-->
		<!--          <a class="logout_title" href="javascript:;">-->
		<!--            <img style="width: 20px;height: 20px;margin-top: -5px" src="~@/assets/icon/icon_sz.png">-->
		<!--            <span class="item_font">&nbsp;设置</span>-->
		<!--          </a>-->
		<!--    </span>-->

		<!-- <span class="action">
          <a class="logout_title" href="javascript:;" @click="$router.back()">
            <img style="width: 22px;height: 20px;margin-top: -5px" src="~@/assets/icon/icon_fh.png">
            <span class="item_font">&nbsp;返回</span>
          </a>
    </span>
    <span class="action">
          <a class="logout_title" href="javascript:;" @click="handleLogout">
            <img style="width: 25px;height: 20px;margin-top: -5px" src="~@/assets/icon/icon_tc.png">
            <span class="item_font">&nbsp;退出登录</span>
          </a>
    </span> -->


		<!--    0512导航栏改版-->
		<!--    &lt;!&ndash; update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 &ndash;&gt;-->
		<!--    &lt;!&ndash; update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 &ndash;&gt;-->
		<!--    <span class="action" @click="showClick">-->
		<!--      <a-icon type="search"></a-icon>-->
		<!--    </span>-->
		<!--    &lt;!&ndash; update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 &ndash;&gt;-->
		<!--    <component :is="searchMenuComp" v-show="searchMenuVisible || isMobile()" class="borders" :visible="searchMenuVisible" title="搜索菜单" :footer="null" @cancel="searchMenuVisible=false">-->
		<!--      <a-select-->
		<!--        class="search-input"-->
		<!--        showSearch-->
		<!--        :showArrow="false"-->
		<!--        placeholder="搜索菜单"-->
		<!--        optionFilterProp="children"-->
		<!--        :filterOption="filterOption"-->
		<!--        :open="isMobile()?true:null"-->
		<!--        :getPopupContainer="(node) => node.parentNode"-->
		<!--        :style="isMobile()?{width: '100%',marginBottom:'50px'}:{}"-->
		<!--        @change="searchMethods"-->
		<!--        @blur="hiddenClick"-->
		<!--      >-->
		<!--        <a-select-option v-for="(site,index) in searchMenuOptions" :key="index" :value="site.id">{{site.meta.title}}</a-select-option>-->
		<!--      </a-select>-->
		<!--    </component>-->
		<!--    &lt;!&ndash; update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 &ndash;&gt;-->
		<!--    &lt;!&ndash; update-end author:sunjianlei date:20191220 for: 解决全局样式冲突的问题 &ndash;&gt;-->
		<!--    &lt;!&ndash; update_end  author:zhaoxin date:20191129 for: 做头部菜单栏导航 &ndash;&gt;-->
		<!--    <span class="action">-->
		<!--    </span>-->
		<!--    <header-notice class="action"/>-->
		<!--    <a-dropdown>-->
		<!--      <span class="action action-full ant-dropdown-link user-dropdown-menu">-->
		<!--        &lt;!&ndash; 头像 &ndash;&gt;-->
		<!--        <a-avatar class="avatar" size="small" src="~@/assets/logo.png"/>-->
		<!--        <span v-if="isDesktop()">欢迎您，{{ nickname() }}</span>-->
		<!--      </span>-->
		<!--      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">-->
		<!--        <a-menu-item key="0">-->
		<!--          <router-link :to="{ name: 'account-center' }">-->
		<!--            <a-icon type="user"/>-->
		<!--            <span>个人中心</span>-->
		<!--          </router-link>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="1">-->
		<!--          <router-link :to="{ name: 'account-settings-base' }">-->
		<!--            <a-icon type="setting"/>-->
		<!--            <span>账户设置</span>-->
		<!--          </router-link>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="3"  @click="systemSetting">-->
		<!--           <a-icon type="tool"/>-->
		<!--           <span>系统设置</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="4" @click="updatePassword">-->
		<!--          <a-icon type="setting"/>-->
		<!--          <span>密码修改</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="5" @click="updateCurrentDepart">-->
		<!--          <a-icon type="cluster"/>-->
		<!--          <span>切换部门</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-item key="6" @click="clearCache">-->
		<!--          <a-icon type="sync"/>-->
		<!--          <span>清理缓存</span>-->
		<!--        </a-menu-item>-->
		<!--       &lt;!&ndash; <a-menu-item key="2" disabled>-->
		<!--          <a-icon type="setting"/>-->
		<!--          <span>测试</span>-->
		<!--        </a-menu-item>-->
		<!--        <a-menu-divider/>-->
		<!--        <a-menu-item key="3">-->
		<!--          <a href="javascript:;" @click="handleLogout">-->
		<!--            <a-icon type="logout"/>-->
		<!--            <span>退出登录</span>-->
		<!--          </a>-->
		<!--        </a-menu-item>&ndash;&gt;-->
		<!--      </a-menu>-->
		<!--    </a-dropdown>-->
		<!--    <span class="action">-->
		<!--      <a class="logout_title" href="javascript:;" @click="handleLogout">-->
		<!--        <a-icon type="logout"/>-->
		<!--        <span v-if="isDesktop()">&nbsp;退出登录</span>-->
		<!--      </a>-->
		<!--    </span>-->
		<!--    <user-password ref="userPassword"></user-password>-->
		<!--    <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>-->
		<!--    <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>-->
	</div>
</template>

<script>
	import HeaderNotice from './HeaderNotice'
	import UserPassword from './UserPassword'
	import SettingDrawer from '@/components/setting/SettingDrawer'
	import DepartSelect from './DepartSelect'
	import {
		mapActions,
		mapGetters,
		mapState
	} from 'vuex'
	import {
		mixinDevice
	} from '@/utils/mixin.js'
	import {
		getFileAccessHttpUrl,
		getAction
	} from '@/api/manage'
	import Vue from 'vue'
	import {
		UI_CACHE_DB_DICT_DATA
	} from '@/store/mutation-types'

	export default {
		name: 'UserMenu',
		mixins: [mixinDevice],
		data() {
			return {
				// update-begin author:sunjianlei date:20200219 for: 头部菜单搜索规范命名 --------------
				searchMenuOptions: [],
				unReadMsgNum: 0,
				searchMenuComp: 'span',
				searchMenuVisible: false,
				userInfo: {},
				collapsed: false,
				manage: [],
				user:'',
				managerList: [
					// {
					//   name:"学生管理系统",
					// },
					// {
					//   name:"教科研管理系统",
					// },
					// {
					//   name:"后勤管理系统",
					// }
				]
				// update-begin author:sunjianlei date:20200219 for: 头部菜单搜索规范命名 --------------
			}
		},
		components: {
			HeaderNotice,
			UserPassword,
			DepartSelect,
			SettingDrawer
		},
		props: {
			theme: {
				type: String,
				required: false,
				default: 'dark'
			},
			collapsed: {
				type: Boolean,
				required: false,
				default: false
			},
		},
		/* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
		created() {

			let lists = []
			this.searchMenus(lists, this.permissionMenuList)
			this.searchMenuOptions = [...lists]
			try {
				this.managerList = JSON.parse(window.localStorage.getItem('manage'))
				this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
				console.log(this.userInfo)
			} catch (e) {

			}
			this.getUnReadMsg();
		},
		mounted() {
			//如果是单点登录模式
			if (process.env.VUE_APP_SSO == 'true') {
				let depart = this.userInfo().orgCode
				if (!depart) {
					this.updateCurrentDepart()
				}
			}
			this.manage = JSON.parse(window.localStorage.getItem('manage'))
			this.user = JSON.parse(localStorage.getItem('userInfo'))
		},
		computed: {
			...mapState({
				// 后台菜单
				permissionMenuList: state => state.user.permissionList

			})
		},
		/* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
		watch: {
			// update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框
			device: {
				immediate: true,
				handler() {
					this.searchMenuVisible = false
					this.searchMenuComp = this.isMobile() ? 'a-modal' : 'span'
				}
			}
			// update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框
		},
		methods: {
			changetype() {
				this.$emit('changetype', !this.collapsed)
			},
			getUnReadMsg() {
				getAction('/message/veMsgNoticeApi/qryUnreadCount', {
					userId: window.localStorage.getItem('userId')
				}).then((res) => {
					if (res.success) {
						this.unReadMsgNum = res.result;
					}
				});
			},
			toPath(item) {
				var domain = item.APP_ADDRESS == null ? item.appAddress : item.APP_ADDRESS
				var myPopup = window.open(domain + '?token=' + window.localStorage.getItem('token') + '&appId=' + item.ID,
					'myWindow')
				//send the message and target URI
				setTimeout(function() {
					// console.log({
					//   tk: window.localStorage.getItem('token'),
					//   app_id: item.ID
					// });
					myPopup.postMessage({
						tk: window.localStorage.getItem('token'),
						app_id: item.ID
					}, domain)
				}, 5000)
				// setTimeout(function() {
				//   myPopup.postMessage({
				//     tk: window.localStorage.getItem('token'),
				//     app_id: item.ID
				//   }, domain)
				// }, 10000);
			},
			/* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
			showClick() {
				this.searchMenuVisible = true
			},
			hiddenClick() {
				this.shows = false
			},
			/* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
			...mapActions(['Logout']),
			...mapGetters(['nickname', 'avatar', 'userInfo']),
			getAvatar() {
				return getFileAccessHttpUrl(this.avatar())
			},
			handleLogout() {
				const that = this

				this.$confirm({
					title: '提示',
					content: '真的要注销登录吗 ?',
					onOk() {
						return that.Logout({}).then(() => {
							// update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
							that.$router.push({
								path: '/user/login'
							})
							// update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
							//window.location.reload()
						}).catch(err => {
							that.$message.error({
								title: '错误',
								description: err.message
							})
						})
					},
					onCancel() {}
				})
			},
			updatePassword() {
				let username = this.userInfo().username
				this.$refs.userPassword.show(username)
			},
			updateCurrentDepart() {
				this.$refs.departSelect.show()
			},
			systemSetting() {
				this.$refs.settingDrawer.showDrawer()
			},
			/* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
			searchMenus(arr, menus) {
				for (let i of menus) {
					if (!i.hidden && 'layouts/RouteView' !== i.component) {
						arr.push(i)
					}
					if (i.children && i.children.length > 0) {
						this.searchMenus(arr, i.children)
					}
				}
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			},
			// update_begin author:sunjianlei date:20191230 for: 解决外部链接打开失败的问题
			searchMethods(value) {
				let route = this.searchMenuOptions.filter(item => item.id === value)[0]
				if (route.meta.internalOrExternal === true || route.component.includes('layouts/IframePageView')) {
					window.open(route.meta.url, '_blank')
				} else {
					this.$router.push({
						path: route.path
					})
				}
				this.searchMenuVisible = false
			},
			// update_end author:sunjianlei date:20191230 for: 解决外部链接打开失败的问题
			/*update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
			/*update_begin author:liushaoqian date:20200507 for: 刷新缓存*/
			clearCache() {
				getAction('sys/dict/refleshCache').then((res) => {
					if (res.success) {
						//重新加载缓存
						getAction('sys/dict/queryAllDictItems').then((res) => {
							if (res.success) {
								Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
								Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
							}
						})
						this.$message.success('刷新缓存完成！')
					}
				}).catch(e => {
					this.$message.warn('刷新缓存失败！')
					console.log('刷新失败', e)
				})
			}
			/*update_end author:liushaoqian date:20200507 for: 刷新缓存*/
		}
	}
</script>

<style lang="less" scoped>
	/* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
	/* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
	.user-wrapper .search-input {
		width: 180px;
		color: inherit;

		/deep/ .ant-select-selection {
			background-color: inherit;
			border: 0;
			border-bottom: 1px solid white;

			&__placeholder,
			&__field__placeholder {
				color: inherit;
			}
		}
	}

	/* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
	/* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
</style>

<style scoped>
	.headBar .right {
		float: right;
	}

	.right {
		display: inline-block;
	}

	.userlogo {
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		margin: 13px;
		width: 32px;
		border-radius: 50%;
	}

	.action {
		margin-left: 15px;
		margin-right: 15px;
	}

	.logout_title {
		color: inherit;
		text-decoration: none;
	}

	.item_font {
		padding-top: 5px;
		font-size: 18px;
		font-family: Microsoft YaHei;
		color: #878787;
	}


	.item_font:focus {
		color: #4e89f8;
	}

	.item_font:hover {
		color: #4e89f8;
	}
</style>
